<template>
  <view class="one-draw">
    <view class="card-item" style="width: 393rpx; height: 465rpx">
      <view
        class="card-front"
        style="width: 393rpx; height: 465rpx"
        :class="{
          'orange-bg': haveDraw[0].rule_id == 1,
          'pink-bg': haveDraw[0].rule_id == 2,
          'blue-bg': haveDraw[0].rule_id == 3,
          'white-bg': haveDraw[0].rule_id == 4,
          'second-rotate-content': secondShow,
        }"
      >
      </view>
      <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }"> </view>
      <!-- <view class="card-png" :style="'background:url(' + chuanshuo+')'">
  	</view> -->
      <image
        class="card-content"
        :class="{ 'second-rotate-content': secondShow }"
        :src="haveDraw[0].img"
        style="height: 330rpx"
        mode="heightFix"
      ></image>
      <image
        v-if="
          haveDraw[0].rule_id == 1 ||
          haveDraw[0].rule_id == 2 ||
          haveDraw[0].rule_id == 3
        "
        class="left-top"
        :src="haveDraw[0].rule_img"
      >
      </image>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      haveDraw: {
        type: String,
        default: 'chart',
      },
      secondShow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {}
    },
    onLaunch: function () {
      console.log('App Launch')
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    },
  }
</script>

<style lang="scss">
  .one-draw {
    // position: relative;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    margin-top: 230rpx;
    .card-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .card-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 393rpx;
        height: 465rpx;
        z-index: 1;
        backface-visibility: hidden;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 393rpx;
        height: 465rpx;
        // z-index: -1;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
          no-repeat;
        background-size: contain;
        // backface-visibility: hidden;
        // animation: rotateBg 2s ease-out forwards;
      }
      .card-content {
        position: absolute;
        // top: 0;
        // left: 0;
        z-index: 2;
        backface-visibility: hidden;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .card-png {
        position: absolute;
        top: 0;
        left: 0;
        width: 393rpx;
        height: 465rpx;
        z-index: 2;
        background-size: contain !important;
        background-repeat: no-repeat !important;
      }
      .left-top {
        // display: none;
        opacity: 0;
        position: absolute;
        top: -75rpx;
        left: -64rpx;
        z-index: 3;
        width: 220rpx;
        height: 220rpx;
        // animation: displayTop 2s ease-out forwards 2s;
      }
    }
  }
  // 卡片背景
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/orange-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/pink-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/blue-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/white-bg2.png')
      no-repeat;
    background-size: cover;
  }
  // 卡牌左上角
  .top-left-purple {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_b.png')
      no-repeat;
    background-size: contain;
  }
  .top-left-pink {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_a.png')
      no-repeat;
    background-size: contain;
  }
  // 传说
  .chuan-shuo {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SSR.png')no-repeat;
    background-size: contain;
  }
  // 稀有
  .xi-you {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SR.png')no-repeat;
    background-size: contain;
  }
  // 普通
  .normal {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/R.png')no-repeat;
    background-size: contain;
  }
  //重复动画
  .second-rotate-content {
    animation: rotateOnce 1.2s ease-out forwards;
  }
  .second-rotate-bg {
    animation: rotateBg 0.8s ease-out forwards;
  }
  /* 定义旋转动画 */
  @keyframes rotateOnce {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes rotateBg {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
</style>
